<template>
  <div class="container">
    <!-- 背景 -->
    <div class="bg" />
    <!-- 头像用户名 -->
    <van-cell 
      class="header-info"
      value-class="user-info-btn"
      title-class="title"
      :border="false"
    >
      个人信息
      <van-icon name="arrow" />
      <template #title>
        <div class="avatar">
          <img :src="userInfo.photo" alt="">
        </div>
        <span>{{ userInfo.name }}</span>
      </template>
    </van-cell>
    <!-- 动态关注粉丝... -->
    <van-grid 
      :border="false"
      icon-size="20px"
    >
      <van-grid-item class="grid-item" >
        <template #icon>
          {{ userInfo.art_count }}
        </template>
        <template #text>
          <span class="grid-item-title">动态</span>
        </template>
      </van-grid-item>
      <van-grid-item class="grid-item">
        <template #icon>
          {{ userInfo.follow_count }}
        </template>
        <template #text>
          <span class="grid-item-title">关注</span>
        </template>
      </van-grid-item>
      <van-grid-item class="grid-item">
        <template #icon>
          {{ userInfo.fans_count }}
        </template>
        <template #text>
          <span class="grid-item-title">粉丝</span>
        </template>
      </van-grid-item>
      <van-grid-item class="grid-item">
        <template #icon>
          {{ userInfo.like_count }}
        </template>
        <template #text>
          <span class="grid-item-title">被赞</span>
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 消息通知 -->
    <div class="card">
      <van-grid 
        :border="false"
        icon-size="20px"
      >
        <van-grid-item icon="comment-o" text="消息通知" />
        <van-grid-item icon="like-o" text="我的收藏" />
        <van-grid-item icon="clock-o" text="阅读历史" />
        <van-grid-item icon="bulb-o" text="我的作品" />
      </van-grid>
    </div>
    <!-- 更多服务 -->
    <div class="card">
      <div class="card-title">更多服务</div>
      <van-grid 
        :border="false"
        icon-size="20px"
      >
        <van-grid-item icon="question-o" text="用户反馈" />
        <van-grid-item icon="service-o" text="小智同学" />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState('my', ['userInfo']),
  },
  methods: {
    ...mapActions('my', ['updateUserInfo']),
  },
  created () {
    this.updateUserInfo();
  },
}
</script>

<style lang="less" scoped>
.container {
  background-color: #f5f5f5;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 99;
  padding: 0 16px;
}
.bg {
  position: absolute;
  left: 0;
  height: 231px;
  width: 100%;
  z-index: -1;
  border-bottom-right-radius: 32px;
  border-bottom-left-radius: 32px;
  background: linear-gradient(-45deg, rgba(100, 100, 255, 1), rgba(120, 50, 255, 1));
}
.header-info {
  background: transparent;
  color: #fff;
  padding: 32px 0;
}
.user-info-btn {
  color: #fff;
  font-size: 12px;
  flex: none;
  display: flex;
  align-items: center;
}
.avatar {
  height: 48px;
  width: 48px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
  }
}
.title {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-gap: 8px;
  align-items: center;
  font-size: 18px;
}
.card {
  margin-top: 16px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
  color: #000!important;
}
.card-title {
  font-size: 18px;
  margin-top: 16px;
  margin-left: 16px;
}
::v-deep .grid-item>div {
  color: #fff;
  font-size: 14px;
  background-color: transparent;
}
.grid-item-title {
  color: #fff;
}
</style>